<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" th:src="@{'/static/js/jquery-3.js'}"></script>
</head>
<body>

<div id="img" style="margin: 200px">

    <div><img th:src="@{'http://qjv76vyaj.hn-bkt.clouddn.com/code/duck/2020-11-16-777d1a1c0b64452fa52352a1449f4b0f.jpg'}"></div>

    <div>选择图片：<input type="file" name="fileName" id="imgId"/></div>
    <input type="submit" onclick="upload()">
</div>

<script type="text/javascript">
    var basePath = "/";
    function upload() {
        var formdate = new FormData();

        var path = $("#imgId")[0].files[0];

        console.log("path ====================== "+ path);

        formdate.append("file",path);

        $.ajax({
            url:basePath+"qiniu/upload",
            type:"POST",
            data:formdate,
            async:false,
            processData:false,
            contentType:false,
            success:function (res) {
                alert(res);
                if(res.status.code == 0){
                    if(!$('#img').empty()){
                        $("#img").empty();
                    }
                    $("#img").append("![](+res.result[0]+)");
                }else{
                    alert("图片上传失败")
                }
            }
        })

    }
</script>

</body>
</html>